<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="box">
    <ul>
      <li v-for="data in datalist" :key="data.filmId">
        <h3>{{data.name}}</h3>
        <img :src="data.poster" />
      </li>
    </ul>
    <child v-if="isCreated"></child>
  </div>

  <script type="text/javascript">

    Vue.component("child", {
      template: `<div id="aaa">
            child--{{title}}
            <button @click="title='1111111'">change1</button>
            <button @click="title='2222222'">change2</button>
        </div>`,

      data() {
        return {
          title: "00000",
          datalist: [],
          count: 0
        }
      },

      methods: {},

      beforeCreate() {
        console.log("beforeCreate")
      },
      created() {
        console.log("created")
      },

      beforeMount() {
        console.log("beforeMount")
      },
      mounted() {
        console.log("mounted", "访问dom,setInterval,window.onscroll, 监听事件 ajax")
      },

      beforeUpdate() {
        console.log("beforeUpdate")
      },
      updated() {
        console.log("updated", "更新之后可以访问dom")
      },

      beforeDestroy() {
        console.log("beforeDestroy-clearInterval ,window.onscroll=null,$off");
      },
      destroyed() {
        console.log("destroyed--clearInterval ,window.onscroll=null,$off")
      }

    })

    var vm = new Vue({
      el: "#box",
      data: {
        isCreated: true,
        datalist: []
      },

      /* 根组件挂载完毕时的【生命周期钩子】 */
      mounted() {
        axios.get("json/test.json")
          .then(res => {
            console.log(res.data);
            this.datalist = res.data.data.films
          })
      }

    })

    // vm.$mount("#box")
    //  vue组件 生命周期 ?
    //  vue组件的 钩子函数？
    //  vue组件的生命周期钩子函数？
  </script>
</body>

</html>